<template>
    <div class="wave_content" v-loading="loadingNum != 0" element-loading-background="rgba(0, 0, 0, 0.3)">
        <!-- 波形频谱 包络谱 图 -->
        <div style="height: 40px; width: 100%; display: flex; align-items: center">
            <el-select v-model="timeSelected" placeholder="请选择时间节点">
                <el-option v-for="item in timeList" :key="item.id" :label="item.time" :value="item.time" />
            </el-select>
            <el-select v-model="tagsSelected" placeholder="请选择图谱">
                <el-option v-for="item in tags" :key="item.id" :label="item.value" :value="item" />
            </el-select>
            <div class="icon" v-show="showIcon" @click="showFallWave"
                style="height: 40px; box-sizing: border-box; line-height: 40px; border: 1px solid #007bff; border-radius: 4px; width: 100px; text-align: center">
                <span style="font-size: 16px">瀑布图</span>
                <i class="iconfont icon-pubutu" title="瀑布图" style="margin-left: 4px"></i>
            </div>
            <div class="icon" v-show="showIcon" @click="showColorWave"
                style="height: 40px; box-sizing: border-box; line-height: 40px; border: 1px solid #007bff; border-radius: 4px; width: 100px; text-align: center; margin-left: 5px">
                <span style="font-size: 16px">彩色谱</span>
                <i class="iconfont icon-pubutu" title="彩色谱" style="margin-left: 4px"></i>
            </div>
        </div>
        <div class="maps" ref="box1" @contextmenu.prevent="showMenu($event)"></div>
        <vue-context-menu :contextMenuData="contextMenuData" @downloadData="downloadData" @setMarkPoint="setMarkPoint"
            @setSecondLine="setSecondLine" @lockDoubleLine="lockDoubleLine" @setFreDouCount="setFreDouCount"
            @freDoubling="freDoubling" @sideFre="sideFre" />
        <export-excel :sensorInfo="sensorInfo" ref="exportExcel1" />
        <el-dialog width="26%" :visible.sync="markPointShow" append-to-body>
            <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label="标记信息">
                    <el-input type="text" :value="MarkPoint.label" readonly="true"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitAddMarkPoint">确认</el-button>
                    <el-button @click="markPointShow = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog width="26%" :visible.sync="multipleShow" append-to-body>
            <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label="频带数量">
                    <el-input type="number" v-model.number="number"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitmultiple">确认</el-button>
                    <el-button @click="multipleShow = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { domaintagsApi, specDomainGetlistApi, specTimeGetlistApi, requestApi } from '@/requset/api'
import { options, polar_option, circular_option, lineConfig, graphicConfig, waveEventConfig, freEventConfig } from './config.js'
import * as echarts from 'echarts'
import exportExcel from '@/components/exportExcel'
import { deepClone } from '@/plugins/clone'

export default {
    data() {
        return {
            tags: [],
            tagsSelected: null,
            options: null, //图表配置
            polar_option: null,
            circular_option: null,
            list: {},
            timeList: [],
            timeSelected: null,
            wave_time: null,
            trackData: [],
            timesbx: [],
            MarkPoints: [], //标记点 数据
            MarkPoint: {}, //点击点 信息
            MarkLines: [],
            markPointShow: false,
            multipleShow: false,
            myChart: null,
            lineConfig: null, //标记点配置
            graphicConfig: null, //
            freEventConfig: null,
            waveEventConfig: null,
            leftClickDisable: true, //左键事件
            multiple: 3, //频带数量
            number: 2,
            fredoubling: false, //倍频状态
            doubleLining: false,
            lockDoubleLining: false, //锁定双游标
            xDiff: 0, //双游标模式x轴双线的差值
            sideFreing: false, //边频状态
            sideFreIndex: 0, //边频中间线 位置
            sideInterval: 0, //边频间隔
            loadingNum: 0,
            loading: null,
        }
    },
    components: { exportExcel },
    computed: {
        showIcon() {
            return this.tagsSelected?.value.includes('频谱') ?? false
        },
    },
    props: {
        sensorInfo: {
            type: Object,
            default() {
                return {}
            },
        },
        date_time: {
            type: Array,
            default() {
                return []
            },
        },
        active: {
            type: Boolean,
            default() {
                return false
            },
        },
        contextMenuData: {
            type: Object,
            default() {
                return null
            },
        },
    },
    watch: {
        active: {
            handler(newVal) {
                if (newVal) {
                    if (this.sensorInfo.id) this.getTags(this.sensorInfo.id).then(() => this.getTimeList().then(() => this.draw()))
                }
            },
            immediate: true,
        },
        sensorInfo: {
            handler(newVal, oldVal) {
                if (!newVal) {
                    return
                }
                if (oldVal.sensor_type === newVal.sensor_type) {
                    if (newVal.single == 1) {
                        this.getTimeList().then(() => {
                            this.getTags(newVal.id).then(() => {
                                const filteredList = this.tags.filter((e) => {
                                    return e.value.includes('波形')
                                })
                                this.tagsSelected = filteredList.length > 0 ? filteredList[0] : null
                                this.clearChart()
                            })
                        })
                    } else {
                        this.getTimeList().then(() => this.getList().then(() => this.draw()))
                    }
                } else {
                    this.getTimeList().then(() => {
                        this.getTags(newVal.id).then(() => this.draw())
                    })
                }
            },
        },
        timeSelected: {
            handler(newVal) {

                this.getList().then(() => this.draw())
                this.$emit('sendTime', newVal)
            },
        },
        tagsSelected: {
            handler(newVal) {
                if (newVal.value.includes('波形')) this.contextMenuData.menulists = this.waveEventConfig
                else this.contextMenuData.menulists = this.freEventConfig
                this.draw()
                this.$emit('sendtagsSelected', newVal)
            },
        },
        date_time: {
            handler() {
                if (this.active) {
                    this.getTimeList().then(() => {

                        this.getList().then(() => this.draw())
                    })
                }
            },
        },
    },
    methods: {
        getTags(id) {
            // 获取可选择  图谱标签
            if (id) {
                this.loadingNum++
                return domaintagsApi({ id })
                    .then((res) => {
                        if (res.data.success) {
                            let list = res.data.data
                            if (list.length == 0) {
                                this.tags = []
                                this.tagsSelected = null
                                return
                            }
                            this.tags = list
                            const filteredList = list.filter((e) => {
                                return e.value.includes('波形')
                            })
                            this.tagsSelected = filteredList.length > 0 ? filteredList[0] : null
                        }
                    })
                    .finally(() => this.loadingNum--)
            }
        },
        getTimeList() {
            this.loadingNum++
            return specTimeGetlistApi({
                id: this.sensorInfo.id,
                startTime: this.date_time[0].getTime(),
                endTime: this.date_time[1].getTime(),
            })
                .then((res) => {
                    if (res.data.code == 0) {
                        let list = res.data.data.reverse()
                        this.timeList = list
                        if (list.length == 0) {
                            this.timeList = []
                        } else {
                            this.timeSelected = this.timeList[0].time
                        }
                    } else {
                        this.timeList = []
                    }
                })
                .finally(() => this.loadingNum--)
        },
        getList() {
            if (this.timeSelected) {
                this.loadingNum++
                return new Promise((resolve) => {
                    specDomainGetlistApi({
                        id: this.sensorInfo.id,
                        time: this.timeSelected,
                    })
                        .then((res) => {
                            if (res.data.code == 0) {
                                let times = []
                                var fs = 12800
                                if (this.sensorInfo.fs) {
                                    var fs = Number(this.sensorInfo.fs)
                                }
                                for (var i = 1; i <= res.data.data['maxlen']; i++) {
                                    times.push(((1 / fs) * 1000 * i).toFixed(3))
                                }
                                this.timesbx = times
                                this.list = res.data.data
                            } else if (res.data.code == -1) {
                                this.list = {}
                            }
                            this.trajectory()
                            resolve()
                        })
                        .finally(() => this.loadingNum--)
                })
            } else {
                return Promise.resolve()
            }
        },
        draw() {
            let tagsSelected = this.tagsSelected
            if (tagsSelected) {
                let list = this.list
                let legendData = [tagsSelected.value + ' ' + tagsSelected.unit]
                let seriesData = []
                let dataX = []
                let name = tagsSelected.value
                let nicknameX = ''
                let nicknameY = ''
                if (name.includes('波形')) {
                    //波形
                    nicknameX = tagsSelected.nickname
                    nicknameY = tagsSelected.nickname
                    this.options.xAxis.name = '时间 / ms'
                    if (list[nicknameX])
                        dataX = this.timesbx.slice(0, list[nicknameX].data.length)
                    this.options.xAxis.axisTick.interval = Math.ceil(dataX.length / 10)
                }
                if (name.includes('频谱') || name.includes('包络谱')) {
                    //其他
                    this.options.xAxis.name = '频率 / Hz'
                    nicknameY = tagsSelected.nickname + 'Data'
                    nicknameX = tagsSelected.nickname + 'Fre'
                    if (list[nicknameX]) dataX = list[nicknameX].data
                }

                if (name.includes('轴心轨迹')) {
                    this.drawTrack()
                    return
                }
                if (name.includes('极坐标')) {
                    for (let key in list) {
                        if (key.includes('polar')) {
                            this.drawPolar(list[key].data)
                        }
                    }
                    return
                }
                //
                if (name.includes('circular')) {
                    let a
                    const keys = Object.keys(this.list)
                    for (const key of keys) {
                        if (key.includes('Speedwave')) {
                            a = list[key]
                            break
                        }
                    }
                    let { data } = a

                    this.drawCircular(data)
                    return
                }
                if (name.includes('伯德')) {
                    this.options.xAxis.name = '频率 / Hz'
                    let a = this.tags.find((e) => e.value.includes('频谱'))
                    nicknameY = a.nickname + 'Data'
                    nicknameX = a.nickname + 'Fre'
                    if (list[nicknameX]) dataX = list[nicknameX].data
                }
                if (name)
                    if (list[nicknameY]) {
                        let data = list[nicknameY].data.map((e) => e.toFixed(4))
                        if (name.includes('伯德')) {
                            data = list[nicknameY].data.map((e) => (e * 2 * Math.PI).toFixed(4))
                        }
                        seriesData = [
                            {
                                name: tagsSelected.value + ' ' + tagsSelected.unit,
                                data,
                                type: 'line',
                            },
                        ]
                        if (seriesData[0].data.length == 0) {
                            // this.$message.info('暂无数据')
                        }
                    } else {
                        this.clearChart()
                        return
                    }
                this.options.legend.data = legendData
                this.options.series = seriesData
                this.options.xAxis.data = dataX
                this.clearChart()
                if (this.active) {
                    let ref = this.$refs.box1
                    this.myChart = echarts.init(ref)
                    this.myChart.setOption(this.options)
                    this.leftClick()
                    this.myChart.on('afterZoom', function (params) {

                    })
                    const chartObserver = new ResizeObserver(() => {
                        this.myChart.resize()
                    })
                    chartObserver.observe(ref)
                    window.addEventListener('resize', function () {
                        this.myChart.resize()
                    })
                }
            }
        },
        // 显示瀑布图
        showFallWave() {
            this.$emit('showFallWave')
        },
        showColorWave() {
            this.$emit('showColorWave')
        },
        clearChart() {
            this.resetChartEvent()
            let ref = this.$refs.box1
            this.MarkPoints = []
            this.MarkLines = []
            let myChart = echarts.init(ref)
            if (myChart) {
                myChart.clear()
                ref.removeAttribute('_echarts_instance_')
            }
        },
        showMenu(e) {
            let x = e.clientX
            let y = e.clientY
            this.contextMenuData.axis = { x, y }
        },
        // 其他操作改变选中时间节点
        changeTimeSelected(e) {
            this.timeSelected = e
        },
        trajectory() {
            if (this.timeList.length <= 1) {
                return
            }
            var index = this.timeList.findIndex((e) => e.time == this.timeSelected) + 1
            if (index > this.timeList.length - 1) {
                index = index - 2
            }
            let time_bef = this.timeList[index].time
            let obj = {
                id: this.sensorInfo.id,
                time: this.timeSelected,
                time_bef,
            }
            requestApi('post', 'spec/dispalcementwave_', obj, false).then((res) => {
                this.trackData = []
                if (res.data.code == 0) {
                    let list = res.data.data
                    if (list.length !== 0) {
                        let valueX = JSON.parse(list[0].value)
                        let valueY = JSON.parse(list[1].value)
                        valueX.forEach((e, i) => {
                            this.trackData.push([this.toStr3(e), this.toStr3(valueY[i])])
                        })
                    }
                }
            })
        },
        toStr3(a) {
            var randomDecimal = Math.floor(Math.random() * 10000) / 10000
            // 将随机小数添加到参数a上，并保留四位小数
            var result = (a + randomDecimal).toFixed(4)
            // 返回带有四位随机小数的数
            return parseFloat(a)
        },
        // 绘制轴心轨迹图
        drawTrack() {

            if (this.trackData.length == 0) {
                this.clearChart()
                this.$message.info('暂无数据')
                return
            }
            this.options.legend.data = []
            this.options.series = [
                {
                    name: '',
                    data: this.trackData,
                    type: 'line', //scatter line
                    itemStyle: {
                        //下面是拐点样式配置属性
                        color: '#FCC62A', //这里设置的拐点颜色
                        borderColor: '#FCC62A', //  拐点边框颜色
                        borderWidth: 1, //  拐点边框宽度
                    },
                    symbol: 'circle', //拐点的形状
                    symbolSize: 2,
                },
            ]
            this.options.xAxis.data = null
            this.options.xAxis.name = ''
            this.options.yAxis.name = ''
            this.clearChart()
            if (this.active) {
                let ref = this.$refs.box1
                var myChart = echarts.init(ref)
                myChart.setOption(this.options)
                const chartObserver = new ResizeObserver(() => {
                    myChart.resize()
                })
                chartObserver.observe(ref)
                window.addEventListener('resize', () => {
                    this.myChart.resize()
                })
            }
        },
        //绘制极坐标
        drawPolar(data) {
            if (data.length == 0) {
                this.clearChart()
                // this.$message.info('暂无数据')
                return
            }
            this.polar_option.series[0].data = data
            this.clearChart()
            if (this.active) {
                let ref = this.$refs.box1
                var myChart = echarts.init(ref)
                myChart.setOption(this.polar_option)
                const chartObserver = new ResizeObserver(() => {
                    this.myChart.resize()
                })
                chartObserver.observe(ref)
                window.addEventListener('resize', function () {
                    this.myChart.resize()
                })
            }
        },
        drawCircular(data) {
            if (this.active) {
                if (data.length == 0) {
                    return
                }
                let max = Math.max(...data)
                let min = Math.min(...data)

                let serData = []
                let radarData = []
                for (var i = 0; i < data.length; i++) {
                    serData.push(data[i])
                    radarData.push({ max, min })
                }

                this.circular_option.radar.indicator = radarData
                this.circular_option.series[0].data[0].value = serData
                let ref = this.$refs.box1
                var myChart = echarts.init(ref)

                this.clearChart()
                myChart.setOption(this.circular_option)
                const chartObserver = new ResizeObserver(() => {
                    myChart.resize()
                })
                chartObserver.observe(ref)
                window.addEventListener('resize', function () {
                    this.myChart.resize()
                })
            }
        },
        // 提交添加 标记 点
        submitAddMarkPoint() {
            this.MarkPoints.push(this.MarkPoint)
            this.addMarkPoint(this.MarkPoints)
            this.$message.success('添加成功')
            this.markPointShow = false
        },
        //设置频带 数量
        submitmultiple() {
            if (this.number < 0) {
                this.$message('无效的频带数')
                this.number = 1
            }
            this.multiple = this.number
            this.$message.success('频带为' + this.multiple)
            this.multipleShow = false
            if (this.sideFreing || this.fredoubling) this.addMarkLine()
        },
        downloadData() {
            //  1表示 导出特征值数据
            let { tagsSelected, list, timeSelected } = this
            this.$refs.exportExcel1.downloadData(2, { tagsSelected, timeSelected, list })
        },
        leftClick() {
            var chartDom = this.myChart.getDom()

            var canvas = chartDom.getElementsByTagName('canvas')[0]
            canvas.addEventListener('mousedown', this.clickHander)
        },
        clickHander(params) {
            if (this.leftClickDisable && params.button === 0) {
                let name = this.tagsSelected.value
                // 获取点击位置的像素坐标
                var xPos = params.offsetX
                var yPos = params.offsetY
                // 将点击位置的像素坐标转换为数据坐标系中的坐标值
                var dataCoord = this.myChart.convertFromPixel({ seriesIndex: 0 }, [xPos, yPos])
                var x = dataCoord[0] //x表示点击点的下标
                var y = dataCoord[1]
                // 获取折线图的 series 数据
                var seriesData = this.myChart.getOption().series[0].data
                var xAxisData = this.myChart.getOption().xAxis[0].data
                if (name.includes('波形')) {
                    var xData = xAxisData[x] + 'ms'
                    var yData = seriesData[x] + 'm/s²'
                } else if (name.includes('频谱') || name.includes('包络谱')) {
                    var xData = xAxisData[x] + 'Hz'
                    var yData = seriesData[x] + 'm/s²'
                }
                this.MarkPoint = {
                    x,
                    seriesData,
                    xAxisData,
                    label: xData + ' , ' + yData,
                    type: name,
                }
                this.addMarkLine()
            }
        },
        addMarkPoint(MarkPoints) {
            let type = ''
            let x = 0
            let seriesData = []
            let xAxisData = []
            let point = []
            MarkPoints.forEach((e) => {
                point.push({
                    xAxis: e.x,
                    yAxis: e.seriesData[e.x],
                    itemStyle: {
                        color: '#E53E32',
                    },
                    symbol: 'circle',
                    symbolSize: 8,
                })
                type = e.type
                seriesData = e.seriesData
                xAxisData = e.xAxisData
                x = e.x
            })
            this.myChart.setOption({
                series: [
                    {
                        markPoint: {
                            data: point,
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: 12,
                                    color: '#E33E31',
                                    formatter: (params) => {
                                        if (type.includes('波形')) return xAxisData[params.data.xAxis] + 'ms,' + seriesData[x] + 'm/s²'
                                        else if (type.includes('频谱') || type.includes('包络谱')) return xAxisData[params.data.xAxis] + 'Hz,' + seriesData[x] + 'm/s²'
                                    },
                                },
                            },
                        },
                    },
                ],
            })
        },
        //给双游标添加可拖拽模型
        addGraphic() {
            var that = this
            function ondrag1() {
                that.MarkLines[0].xAxis = that.myChart.convertFromPixel({ xAxisIndex: 0 }, this.position[0])
                if (that.lockDoubleLining) {
                    that.MarkPoint.x = that.MarkLines[0].xAxis + that.xDiff
                    that.MarkPoint.label = `${that.MarkPoint.xAxisData[that.MarkPoint.x]}Hz , ${that.MarkPoint.seriesData[that.MarkPoint.x]}m/s²`
                }
                that.addMarkLine()
                that.leftClickDisable = true
            }
            let { xAxis } = this.MarkLines[0]
            this.graphicConfig.position = [this.myChart.convertToPixel({ xAxisIndex: 0 }, xAxis), 0]
            this.graphicConfig.ondrag = ondrag1
            this.graphicConfig.ondragstart = () => (that.leftClickDisable = false)
            this.myChart.setOption({
                graphic: [this.graphicConfig],
            })
        },
        //在波形  或 频谱图上做标记点
        setMarkPoint() {
            this.markPointShow = true
        },
        setSecondLine(lineX = 0, lineColor = '#EDAAAD') {
            this.doubleLining = !this.doubleLining
            this.MarkLines = this.MarkLines.length === 0 ? [{ xAxis: lineX, lineStyle: { color: lineColor, type: 'solid' } }] : []
            this.addMarkLine()
        },
        setFreDouCount() {
            this.multipleShow = true
        },
        //左键添加标记线
        addMarkLine() {
            let { x, seriesData, xAxisData, type } = this.MarkPoint
            let arrPoints = []
            let arrLines = []
            let xDifference = ''
            let yDifference = ''
            //波形图 双游标模式
            if (this.doubleLining) {
                if (this.lockDoubleLining) {
                    this.MarkLines[0].xAxis = x - this.xDiff
                }
                arrLines.push(this.MarkLines[0])
                this.xDiff = x - this.MarkLines[0].xAxis
                xDifference = 'ΔF=' + (1 / ((xAxisData[x] - xAxisData[this.MarkLines[0].xAxis]) / 1000)).toFixed(3) + 'Hz'
                yDifference = 'ΔAmp=' + Math.abs(seriesData[x] - seriesData[this.MarkLines[0].xAxis]).toFixed(3) + 'm/s²'
                this.addGraphic()
            }
            if (this.MarkPoints.length != 0)
                this.MarkPoints.forEach((e) => {
                    arrPoints.push({
                        xAxis: e.x,
                        yAxis: e.seriesData[e.x],
                        itemStyle: {
                            color: '#E53E32',
                        },
                        symbol: 'circle',
                        symbolSize: 8,
                    })
                })

            arrLines.push({ xAxis: x })
            //倍频 模式
            if (this.fredoubling) {
                for (let i = 2; i <= this.multiple; i++) {

                    arrLines.push({ xAxis: x * i })
                }
            }
            //边频模式
            if (this.sideFreing) {
                for (let i = 1; i < this.multiple; i++) {
                    arrLines.unshift({ xAxis: x - this.sideInterval * i * 1 })
                }
                for (let i = 1; i < this.multiple; i++) {
                    arrLines.push({ xAxis: x + this.sideInterval * i })
                }
                this.sideGraphic(arrLines.map((e) => e.xAxis))
            }
            arrPoints.push({
                xAxis: x,
                yAxis: seriesData[x],
                itemStyle: {
                    color: '#E53E32',
                },
                symbol: 'circle',
                symbolSize: 8,
            })
            this.lineConfig.data = arrLines
            this.lineConfig.label.normal.formatter = (params) => {
                let { dataIndex } = params
                if (this.fredoubling) if (dataIndex > 0) return xAxisData[params.data.xAxis] + 'Hz,' + seriesData[params.data.xAxis] + 'm/s²'
                if (this.sideFreing) if (dataIndex != Math.floor(arrLines.length / 2)) return xAxisData[params.data.xAxis] + 'Hz,' + seriesData[params.data.xAxis] + 'm/s²'
                return ' '
            }

            this.myChart.setOption({
                series: [
                    {
                        markLine: this.lineConfig,
                        markPoint: {
                            data: arrPoints,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top',
                                    fontSize: 12,
                                    color: 'white',
                                    formatter: (params) => {
                                        let { dataIndex } = params
                                        if (type.includes('波形')) {
                                            //只有左键点击的标记点 才显示 差值
                                            if (dataIndex == arrPoints.length - 1) return xAxisData[params.data.xAxis] + 'ms,' + params.data.yAxis + 'm/s²' + '\n' + xDifference + ',' + yDifference
                                            else return xAxisData[params.data.xAxis] + 'ms,' + params.data.yAxis + 'm/s²'
                                        } else if (type.includes('频谱') || type.includes('包络谱')) {
                                            return xAxisData[params.data.xAxis] + 'Hz,' + params.data.yAxis + 'm/s²'
                                        }
                                    },
                                },
                            },
                        },
                    },
                ],
            })
        },
        freDoubling() {
            this.sideFreing = false
            this.fredoubling = !this.fredoubling
            this.addMarkLine()
        },
        resetChartEvent() {
            this.fredoubling = false
            this.sideFreing = false
            this.doubleLining = false
            this.leftClickDisable = true
            this.MarkPoints = []
            this.MarkLines = []
            this.lockDoubleLining = false
        },
        //开启边频 模式
        sideFre() {
            const x = this.MarkPoint.x ?? 0
            this.sideFreIndex = x
            this.sideInterval = x
            this.sideFreing = !this.sideFreing
            this.fredoubling = false
            this.addMarkLine()
        },
        //锁定双游标
        lockDoubleLine() {
            this.lockDoubleLining = !this.lockDoubleLining
        },
        // 边频模式下添加 可拖拽
        sideGraphic(arr) {
            var that = this
            let configArr = []
            for (var i = 0; i < arr.length; i++) {
                let config = deepClone(this.graphicConfig)
                if (i != Math.floor(arr.length / 2)) {
                    //不给主轴拖拽事件
                    config.id = i
                    config.position = [that.myChart.convertToPixel({ xAxisIndex: 0 }, arr[i]), 0]
                    config.ondragstart = () => (that.leftClickDisable = false)
                    config.ondrag = function () {
                        let i = Number(this.id)
                        let midIndex = Math.floor(arr.length / 2)
                        let a = that.myChart.convertFromPixel({ xAxisIndex: 0 }, this.position[0])
                        if (i > midIndex) {
                            that.sideInterval = Math.abs(a - arr[i - 1])
                        } else if (i + 1 < arr.length) {
                            that.sideInterval = Math.abs(a - arr[i + 1])
                        }
                        that.addMarkLine()
                        that.leftClickDisable = true
                    }
                    configArr.push(config)
                }
            }
            this.myChart.setOption({
                graphic: configArr,
            })
        },
    },
    created() {
        this.options = options
        this.polar_option = polar_option
        this.circular_option = circular_option
        this.lineConfig = lineConfig
        this.graphicConfig = graphicConfig
        this.freEventConfig = freEventConfig
        this.waveEventConfig = waveEventConfig
    },
}
</script>

<style scoped lang="less">
.wave_content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

    .tabs {
        width: 160px;
        height: 100%;
        // overflow: auto;

        .tab {
            width: 100%;
            height: 22px;
            font-size: 14px;
            line-height: 22px;
            text-align: center;
            color: aqua;
            // margin-bottom: 2px;
            border-right: 1px solid red;
            border-bottom: 1px solid red;
            background-color: cornflowerblue;
            cursor: pointer;
        }
    }

    .el-select {
        width: 190px;
        margin-right: 4px;
    }

    .maps {
        width: 100%;
        height: 94%;
        overflow: auto;
        position: relative;

        .echarts_noData {
            text-align: center;
            margin-top: 10%;

            img {
                width: 320px;
            }

            div {
                margin-top: 10px;
                color: #b2e3ff;
                font-size: 18px;
                font-weight: 600;
            }
        }
    }

    .icon {
        font-size: 19px;
        color: #a5bdde;
        cursor: pointer;
        transition: all 0.4s;
    }

    .icon:hover {
        color: #0cd9e8;
    }
}
</style>
